<template>
  <div class="user">
    <div class="userInfo">
      <img :src="user.avatarUrl" class="userIcon" alt />
      <p class="name">
        {{ user.nickname }}
        <img
          class="gender"
          :src="require('../assets/img/' + gender + '.png')"
          alt=""
        />
      </p>
      <p class="sign">个人介绍：{{ user.signature }}</p>
      <div class="trends">
        <p class="count">{{ user.eventCount ? user.eventCount : 0 }}</p>
        <p class="title">动态</p>
      </div>
      <div class="follows">
        <p class="count">{{ user.follows ? user.follows : 0 }}</p>
        <p class="title">关注</p>
      </div>
      <div class="fans">
        <p class="count">{{ user.followed ? user.followed : 0 }}</p>
        <p class="title">粉丝</p>
      </div>
    </div>
    <div class="myPlayList">
      <h3>我的歌单</h3>
      <ul class="songlist" v-if="myPlayList.length > 0">
        <ListItem v-for="sl in myPlayList" :key="sl.id" :item="sl"></ListItem>
      </ul>
    </div>
    <p class="logout" @click="logout">登出</p>
  </div>
</template>

<script>
import ListItem from "@/components/ListItem";
export default {
  name: "My",
  components: {
    ListItem,
  },
  data() {
    return {
      user: null,
      isLogin: false,
      gender: "man",
      myPlayList: [],
    };
  },
  beforeRouteEnter(to, from, next) {
    if (window.localStorage.getItem("user")) {
      next();
    } else {
      next("/login");
    }
    next();
  },
  created() {
    // 获取用户信息
    let user = JSON.parse(window.localStorage.getItem("user")); //获取本地user
    if (user) this.user = user;
    if (!this.user.gender == 1) this.gender = "lady";
    // console.log(this.user);
    // 获取歌单  http://localhost:3000/user/playlist?uid=4973705132
    this.$http
      .get("/user/playlist?uid=" + this.user.userId)
      .then((data) => {
        this.myPlayList = data.data.playlist;
        // console.log(this.myPlayList);
      })
      .catch((err) => {
        console.log("err:", err);
      });
  },
  methods: {
    logout() {
      window.localStorage.removeItem("user");
      window.localStorage.removeItem("isLogin");
      setTimeout(() => {
        this.$router.push("/login");
      }, 0);
    },
    sendListId(id) {
      this.$router.push({ name: "ListDetail", params: { id } });
    },
  },
};
</script>

<style lang='less' scoped>
.user {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .userInfo {
    width: 100%;
    text-align: center;
    position: relative;
    img {
      position: absolute;
      left: 2vw;
      top: 2vh;
      width: 30vw;
    }
    .name {
      position: absolute;
      width: 60vw;
      left: 36vw;
      top: 4vh;
      text-align: left;
      font-size: 1rem;
      font-weight: 600;
      color: rgb(44, 44, 44);
      padding-bottom: 1vh;
      border-bottom: 1px solid #8a898e;
      .gender {
        width: 16px;
        position: absolute;
        top: 0.5vh;
        left: 24vw;
      }
    }
    .sign {
      position: absolute;
      width: 60vw;
      left: 36vw;
      top: 2vh;
      padding-top: 3rem;
      font-size: 0.5rem;
      text-align: left;
    }
    .trends {
      position: absolute;
      left: 36vw;
      top: 13vh;
    }
    .follows {
      position: absolute;
      left: 48vw;
      top: 13vh;
    }
    .fans {
      position: absolute;
      left: 60vw;
      top: 13vh;
    }
    .count {
      font-weight: 700;
      color: rgba(0, 0, 0, 0.911);
    }
    .title {
      font-weight: 100;
    }
  }
  .myPlayList {
    border-top: 1px solid #ddd;
    margin-top: 22vh;
    width: 100%;
    min-height: 70vh;
    box-sizing: border-box;
    padding: 0 0.5rem;
    h3 {
      font-size: 1.4rem;
      border-bottom: 1px solid #8a898e52;
      color: #333;
      padding: 0.6rem 0;
    }
    .songlist {
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
      li {
        box-sizing: border-box;
        padding: 8px 4px 8px 4px;
        width: 33%;
      }
    }
  }
  .logout {
    width: 80vw;
    border: 1px solid #8a898e;
    border-radius: 10px;
    position: absolute;
    bottom: 2vh;
    font-size: 1rem;
  }
  p {
    color: #8a898e;
    text-align: center;
  }
}
</style>